<template>
  <div class="views-gonggao-index" style="margin-top: 20px">
    <div>
      <e-container>
        <div class="hjl-titledianzi">
          <div class="section_title">
            <h2>
              <span>公告消息</span>
            </h2>
          </div>
          <div class="section_content">
            <div class="hotnews class2">
              <ul class="a">
                <li v-for="(r,i) in lists">
                  <router-link :to="{path:'/gonggao/detail',query:{id:r.id}}" class="clearfix">
                    <span class="dog">{{ i+1 }}</span>
                    <span class="shijian">{{ r.addtime }}</span>
                    {{ r.biaoti }}
                  </router-link>
                </li>
              </ul>
            </div>

            <div style="margin-top: 10px; text-align: center">
              <el-pagination
                  @current-change="loadList"
                  :page-sizes="[12, 24, 36, 48,60]"
                  v-model:current-page="search.page"
                  v-model:page-size="search.pagesize"
                  @size-change="sizeChange"
                  layout="total, sizes, prev, pager, next"
                  :total="totalCount"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </e-container>
    </div>
  </div>
</template>

<script setup>
import http from "@/utils/ajax/http";
import DB from "@/utils/db";
import router from "@/router";

import { ref, reactive, watch, unref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import { session } from "@/utils/utils";
import { canGonggaoSelect, useGonggaoSelect, canGonggaoDelete } from "@/module";
import { extend } from "@/utils/extend";
import { ElMessageBox, ElMessage } from "element-plus";

const route = useRoute();
const search = reactive({
  biaoti: "",
  addtime_start: "",
  addtime_end: "",
  page: 1, // 当前页
  pagesize: 12, // 每页行数
  orderby: "id", // 排序字段
  sort: "desc", // 排序类型
});
extend(search, route.query);
// 链接参数变化时更新这些内容
watch(
    () => route.query,
    () => {
      extend(search, route.query);
      loadList(1);
    },
    { deep: true }
);

// 总行数
const totalCount = ref(0);
/**
 * 列表数据
 * @type {EGonggao[]}
 */
const lists = ref([]);
// 加载状态
const loading = ref(false);

// 排序操作
const sortChange = (e) => {
  console.log(e);
  if (e.order == null) {
    search.orderby = "id";
    search.sort = "desc";
  } else {
    search.orderby = e.prop;
    search.sort = e.order == "ascending" ? "asc" : "desc";
  }
  loadList(1);
};
// 设置页数多少
const sizeChange = (e) => {
  search.pagesize = e;
  loadList(1);
};

// 加载公告列表方法
const loadList = (page) => {
  // 加载
  if (unref(loading)) return;
  loading.value = true;
  search.page = page;

  http.post("/api/gonggao/selectPages", search).then(
      (res) => {
        loading.value = false;
        if (res.code == 0) {
          var data = res.data;
          lists.value = data.lists.records;
          totalCount.value = data.lists.total;
        }
      },
      (err) => {
        loading.value = false;
        ElMessage.error(err.message);
      }
  );
};

onBeforeMount(() => {
  loadList(1);
});
</script>

<style scoped lang="scss">
.views-gonggao-index {
}
</style>
